import React, { useEffect, useMemo, useRef, useState } from 'react'
import styles from './ai.module.scss'
import { Avatar, Input, NavBar, Card, Button, Toast } from 'antd-mobile'
import aiimg from '../../assets/ai.png'
import btnimg from '../../assets/images/btn_03.jpg'
import { useNavigate } from 'react-router-dom'
import { UserAddOutline, UserCircleOutline, EditSOutline } from 'antd-mobile-icons'
interface msgItem{
  role:string
  msg:string
}

const Index = () => {
  const nav=useNavigate()
  const chatEl = useRef<HTMLDivElement>(null)
  const [chatList, setChatList] = useState<msgItem[]>([])
  const [msgVal, setmsgVal] = useState<string>('')
  const ws = useRef<WebSocket|null>(null)
  useEffect(() => {
    ws.current=new WebSocket('ws://39.96.167.237/ws/support');
    ws.current.onopen = () => {
      console.log('链接成功');
    }
    ws.current.onmessage = (msg) => {
      const data = JSON.parse(msg.data)
      if(data.type==='reply'){
        setChatList((pre)=>[
       ...pre,
       {role:'server',msg:data.text}
        ]
        )
      }
    }
    ws.current.onclose = () => {
      console.log('链接结束');

    }
    ws.current.onerror = () => {
      console.log('链接错误');
    }
    return ()=>{
      ws.current?.close()
    }
  }, [])
  const handelchat = () => {
   if (!msgVal) {
    Toast.show('请输入') // 只调用，不返回
    return // 单独返回void
  }
    if (ws.current === null) {
      return 
    }
    ws.current.send(
      JSON.stringify({
        text:msgVal
      })
    )
  setChatList((pre)=>[...pre,{role:'user',msg:msgVal}])
    setmsgVal('')
  }
useEffect(()=>{
  if(chatEl.current===null){
    return
  }
  chatEl.current.scrollTop=chatEl.current.scrollHeight
},[msgVal])
  return (
    <div className={styles.aibox}>
      <div className={styles.top}>
        <NavBar onBack={()=>nav('/')}>春雨慧问</NavBar>
      </div>
      <main ref={chatEl}>
        <div className={styles.mainbox}>
          <div className={styles.imgbox}>
            <Avatar src={aiimg} className={styles.img}></Avatar>
          </div>
          <div className={styles.cardbox}>
            <Card className={styles.carditem}>
              <h4>嗨！我是你的医生朋友慧问！</h4>
              <p>
                我是68万医生执业平台春雨医生的AI之子，很开心和你相见！我呢，可以回答你医疗的专业问题，帮你转诊合适的医生和医院，还能帮你解读个人检验报告，给你个性化的健康建议。嗯，你想问我点什么呢？
              </p>
            </Card>
          </div>
        </div>
        <div className={styles.msgList}>
          {
            chatList.map((it,ind)=>(
               <div className={styles.msgitem}
               style={
                it.role==='user'
                ?{flexDirection:'row-reverse'}
                :{flexDirection:'row'}
               }
               key={ind}
               >
                <span
                className={
                  it.role==='user'
                  ?styles.msgitem_user
                  :styles.msgiten_ai
                }
                >
                  {it.msg}
                </span>
                
              </div>
            ))
          }
         
        </div>
      </main>
      <footer>
        <div>
          <button className={styles.editPill} type="button">
            <UserAddOutline />
            报告解读
          </button>
          <button className={styles.editPill} type="button">
            <UserAddOutline />
            推荐医生
          </button>
          <button className={styles.editPill} type="button">
            <UserAddOutline />
            拍图诊断
          </button>
        </div>
        <div className={styles.inbtnbox}>
          <Input placeholder='请描述一下您想咨询的健康问题' className={styles.input}
            value={msgVal}
            onChange={val => {
              setmsgVal(val)
            }}
          ></Input><Button className={styles.btn}
            onClick={handelchat}
          ><img src={btnimg}></img></Button>
        </div>
      </footer>
    </div>
  )
}

export default Index
